<template>
  <view class="audio_center">
    <view class="audio_center_cover">
      <image v-if="audioCover" class="audio_center_cover_img" mode="aspectFill" :src="audioCover"></image>
      <view class="iconfont" @tap="clickAudio" :class="audio_status ? 'icon-play-stop' : 'icon-play-cell'"></view>
    </view>
    <view class="audio_center_right">
      <view v-if="stringObject(src) == 'string'" class="single">
        <view class="single_title">
          <view class="single_title_info" :style="{ color: audioTitleColor }">{{ audioTitle }}</view>
          <view class="tips">{{ timeTxt }}</view>
        </view>
        <view class="tips">{{ subheading }}</view>
        <slider
          :backgroundColor="backgroundColor"
          :activeColor="activeColor"
          @change="sliderChange"
          :value="sliderIndex"
          :max="maxSliderIndex"
          :block-size="0"
        />
      </view>
      <view v-else>相关功能正在开发中~</view>
    </view>
  </view>
</template>
<script>
let timer;
export default {
  name: 'syAudio',
  emits: ['audioPlay', 'audioPause', 'audioEnd', 'audioCanplay', 'change'],
  data() {
    return {
      audio_status: false,

      timeTxt: '00 : 00',
      timeIndex: 0,

      sliderIndex: 0,
      maxSliderIndex: 100,

      stringObject: (data) => {
        return typeof data;
      },
      innerAudioContext: uni.createInnerAudioContext()
    };
  },
  props: {
    //是否自动播放(只支持微信内置浏览器,小程序，app)
    autoplay: {
      type: Boolean,
      default: false
    },
    //音频地址
    src: {
      type: [String, Array],
      default: ''
    },
    //是否倒计时
    isCountDown: {
      type: Boolean,
      default: false
    },
    //音乐封面
    audioCover: {
      type: String,
      default: ''
    },
    //标题
    audioTitle: {
      type: String,
      default: 'new Audio Title'
    },
    //标题颜色
    audioTitleColor: {
      type: String,
      default: '#333'
    },
    //副标题
    subheading: {
      type: String,
      default: 'new Audio Subheading'
    },
    //滑块左侧已选择部分的线条颜色
    activeColor: {
      type: String,
      default: '#bf41a2'
    },
    //滑块右侧背景条的颜色
    backgroundColor: {
      type: String,
      default: '#f1c38b'
    }
  },
  mounted() {
    console.log('加载mounted');
    this.innerAudioContexts.src = typeof this.src == 'string' ? this.src : this.src[0];

    if (this.autoplay) {
      if (!this.src) return console.error('src cannot be empty，The target value is string or array');

      // #ifdef H5
      var ua = window.navigator.userAgent.toLowerCase();
      if (ua.match(/MicroMessenger/i) == 'micromessenger') {
        const jweixin = require('../../utils/jweixin');

        jweixin.config({});
        jweixin.ready(() => {
          WeixinJSBridge.invoke('getNetworkType', {}, (e) => {
            this.innerAudioContexts.play();
            this.countDown();
          });
        });
      }
      // #endif

      // #ifndef H5
      this.innerAudioContexts.autoplay = true;
      // #endif
    }

    this.innerAudioContexts.onPlay(() => {
      this.audio_status = true;
      this.$emit('audioPlay');
      setTimeout(() => {
        this.maxSliderIndex = parseFloat(this.innerAudioContexts.duration).toFixed(2);
        this.countDown();
      }, 100);
    });

    this.innerAudioContexts.onPause(() => {
      this.$emit('audioPause');
    });

    this.innerAudioContexts.onEnded(() => {
      this.audio_status = !this.audio_status;
      this.$emit('audioEnd');
    });

    this.innerAudioContexts.onCanplay((event) => {
      this.$emit('audioCanplay');
      // #ifdef MP
      this.maxSliderIndex = parseFloat(this.innerAudioContexts.duration).toFixed(2);
      // #endif
    });

    this.innerAudioContexts.onPlay(() => {
      this.$emit('change', { state: true });
    });

    this.innerAudioContexts.onPause(() => {
      this.$emit('change', { state: false });
    });
  },
  methods: {
    //销毁innerAudioContext()实例
    audioDestroy() {
      this.innerAudioContexts.stop();
      if (this.innerAudioContexts) {
        this.innerAudioContexts.destroy();
        this.audio_status = false;
      }
    },
    //跳转到指定位置
    audioSeek(value) {
      this.sliderChange(value);
    },
    //控制音乐播放/暂停
    audioPause() {
      this.clickAudio();
    },
    countDown() {
      timer = setInterval(() => {
        this.sliderIndex = parseFloat(this.innerAudioContexts.currentTime).toFixed(2);

        this.timeTxt = this.getTime(
          this.isCountDown
            ? this.innerAudioContexts.duration - this.innerAudioContexts.currentTime
            : this.innerAudioContexts.currentTime
        );
        this.timeTxt = this.isCountDown ? '- ' + this.timeTxt : this.timeTxt;

        if (this.innerAudioContexts.currentTime >= this.innerAudioContexts.duration) {
          clearInterval(timer);
        }
      }, 100);
    },
    clickAudio() {
      if (this.audio_status && !this.innerAudioContexts.paused) {
        this.innerAudioContexts.pause();
        clearInterval(timer);
      } else {
        this.innerAudioContexts.play();
      }

      this.audio_status = !this.audio_status;
    },
    getTime(time) {
      let m = parseInt((time / 60) % 60);
      m = m < 10 ? '0' + m : m;
      let s = parseInt(time % 60);
      s = s < 10 ? '0' + s : s;
      return m + ' : ' + s;
    },
    sliderChange(e) {
      this.innerAudioContexts.seek(e.detail ? e.detail.value : e);
      this.sliderIndex = e.detail ? e.detail.value : e;
    }
  },
  onUnload() {
    console.log('sy-audio --onUnload销毁？');
    this.audioDestroy();
    this.innerAudioContexts.stop();
  },
  onBackPress() {
    console.log('sy-audio -- onBackPress监听页面返回');
  },
  onHide() {
    console.log('sy-audio -- onHide隐藏？');
    this.audioDestroy();
    this.innerAudioContexts.stop();
  },
  beforeDestroy() {
    console.log('beforeDestroy -- beforeDestroy销毁？');
    this.audioDestroy();
    this.innerAudioContexts.stop();
  }
};
</script>

<style lang="scss" scoped>
@import url('../../static/font/iconfont.css');

::v-deep uni-slider,
::v-deep slider {
  margin: 0;
  overflow: hidden;
  padding: 0;
}

.audio_center {
  display: flex;
  box-shadow: 0 0 10rpx #c3c3c3;
  border-radius: 10rpx;
  overflow: hidden;
  align-items: stretch;

  .single {
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    padding: 16rpx 24rpx 10rpx 0;

    .tips {
      font-size: 22rpx;
      color: #919191;
      flex-shrink: 0;
    }

    &_title {
      &_info {
        font-size: 28rpx;
        overflow: hidden;
        display: -webkit-box;
        -webkit-line-clamp: 1;
        -webkit-box-orient: vertical;
        margin-right: 20rpx;
      }

      display: flex;
      justify-content: space-between;
      align-items: flex-end;
    }
  }

  &_cover {
    flex-shrink: 0;
    background: #f5f5f5;
    position: relative;
    display: flex;
    align-items: stretch;
    width: 127rpx;

    .iconfont {
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      margin: auto;
      z-index: 9;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 64rpx;
      background: rgba(0, 0, 0, 0.25);
      color: #fff;
    }

    &_img {
      width: 127rpx;
      height: 100%;
      border-radius: 10rpx 0 0 10rpx;
    }

    margin-right: 30rpx;
  }

  &_right {
    display: flex;
    align-items: stretch;
    flex: 1;
  }
}
</style>
